<template>
  <!-- 圈子Item -->
  <view
    class="hb-p-3 hb-bg-white hb-mb-4 hb-rounded-xl hb-flex hb-items-center hb-box-shadow-base"
    @click="handleToCircleDetail"
  >
    <TmImage class="hb-flex-shrink-0" :src="item.avatar" :width="128" :height="128" :round="4" />
    <view class="hb-flex hb-flex-col hb-justify-between hb-ml-3 hb-flex-1 hb-h-16">
      <TmText _class="text-overflow-1 hb-font-bold" :label="item.name" :font-size="32" />
      <TmText _class="text-overflow-1" color="#969799" :label="item.description" :font-size="24" />
      <view class="hb-flex hb-gap-2">
        <RoleTag
          v-if="item.roleType === RoleTypeEnum.SUPER_ADMIN"
          text="超级管理员"
          type="superAdmin"
        />
        <RoleTag v-else-if="item.roleType === RoleTypeEnum.ADMIN" text="管理员" type="admin" />
        <RoleTag v-else text="成员" type="member" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { CircleListResult } from '@/api/contact/types';
  import { RoleTypeEnum } from '@/enums/LoginEnum';

  const props = defineProps<{
    item: CircleListResult;
  }>();

  const emits = defineEmits<{
    (e: 'refresh'): void;
  }>();

  const handleToCircleDetail = () => {
    navigateTo({
      name: 'circleDetail',
      options: {
        uuid: props.item.uuid,
        success: () => emits('refresh'),
      },
    });
  };
</script>

<style scoped></style>
